package org.example.project.ui
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.Share
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import org.jetbrains.compose.ui.tooling.preview.Preview

@Composable
@Preview
internal  fun TencentMapDrawerPreview() {
    TencentMapDrawer(
        //这个代码的意思是，当抽屉处于Collapsed状态时，
        // 显示一个背景内容，当抽屉处于SemiExpanded或Expanded状态时
        // ，显示一个抽屉内容。
        backgroundContent = {
            Column(
                modifier = Modifier.fillMaxSize(),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = "北京",
                    fontSize = 24.sp,
                    fontWeight = FontWeight.Bold
                )
            }
        },
        drawerContent = { drawerState, progress ->
            Column(
                modifier = Modifier
                    .fillMaxSize(),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                // 1️⃣ 第一部分：路线简要信息（任何状态都显示）
                     firstView()//替换成腾讯的组建
                // 2️⃣ 第二部分：功能按钮组（SemiExpanded 及 Expanded时显示）
                if (drawerState >= DrawerState.SemiExpanded) {
                    Spacer(modifier = Modifier.height(16.dp))
                    Row(
                        modifier = Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.SpaceEvenly
                    ) {
                        FunctionButton(Icons.Default.Search, "路线偏好")
                        FunctionButton(Icons.Default.Search, "沿途搜")
                        FunctionButton(Icons.Default.Share, "反馈")
                        FunctionButton(Icons.Default.Share, "行程分享")
                    }
                }

                // 3️⃣ 第三部分：车辆信息（只有 Expanded 状态显示）
                if (drawerState == DrawerState.Expanded) {
                    Spacer(modifier = Modifier.height(24.dp))
                    Column(
                        modifier = Modifier.fillMaxWidth(),
                        horizontalAlignment = Alignment.Start
                    ) {
                        Text(
                            text = "车辆信息",
                            fontSize = 18.sp,
                            fontWeight = FontWeight.Bold,
                            modifier = Modifier.padding(bottom = 8.dp)
                        )
                        Text(
                            text = """
                                - 车辆类型：电动车
                                - 车牌号码：粤A12345
                                - 续航里程：150公里
                            """.trimIndent(),
                            fontSize = 14.sp,
                            color = Color.DarkGray
                        )
                    }
                }
            }
        },
        onCollapse = { println("收起") },
        onSemiExpand = { println("半展开") },
        onExpand = { println("展开") }
    )
}

@Composable
private fun firstView() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(
                text = "11.4公里 · 37分钟 🚗19",
                fontSize = 16.sp,
                fontWeight = FontWeight.Bold
            )
            Text(
                text = "预计18:45到达",
                fontSize = 12.sp,
                color = Color.Gray
            )
        }

    }
}

@Composable
internal  fun FunctionButton(icon: ImageVector, label: String) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(
            imageVector = icon,
            contentDescription = label,
            tint = MaterialTheme.colors.primary,
            modifier = Modifier.size(36.dp)
        )
        Spacer(modifier = Modifier.height(4.dp))
        Text(text = label, fontSize = 12.sp)
    }
}

